<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 实现商品属性的计算显示</title>
    <style>
        body {
            font-size: 12px;
        }

        dt {
            width: 100px;
            text-align: right;
        }

        dl {
            clear: both;
            overflow: hidden;
        }

        dt, dd {
            float: left;
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
        }

        button {
            font-size: 14px;
            font-weight: bold;
            width: 100px;
            height: 30px;
            margin: 0 10px;
        }

        .active {
            color: red;
            background-color:#8EC6FF;
        }
    </style>
</head>
<body>
<div id="app">
	<template>
			{{ selectedTypeDesc }}
			<dl v-if="JSON.stringify(selectedResult)!='{}'">
				当前属性：{{'编号:'+selectedResult.skuId+'-库存:'+selectedResult.remain+'-价格:'+selectedResult.price}}
			</dl>
			<dl v-for="(item, key) in specTypes" class="content">
				<dt> {{key}} :</dt>
				<dd>
					<button
							class="item"
							v-for="value in item"
							@click="handleActive(key, value)"
							:disabled="value.disabled"
							v-bind:class="{active: value.active}"
					> {{ value.name }}
					</button>
				</dd>
			</dl>
	</template>
</div>
</body>
<script src="https://unpkg.com/vue "></script>
<script>
    const tempData = {};
    let types = [
        {typeTitle: 'A', typeValues: ['大','中', '小']},
        {typeTitle: 'B', typeValues: ['黄', '绿','紫','白','黑','红']},
        {typeTitle: 'C', typeValues: ['重', '轻']}];
    let skuList = {
        '大-黄-重': {skuId: 1, remain: 30, price: 99},
        '小-红-轻': {skuId: 2, remain: 10, price: 56},
        '大-红-重': {skuId: 3, remain: 2, price: 198}
    };

    let vue = new Vue({
        el: "#app",
        data() {
            return {
                specTypes: {},//规则属性
                specValues: [],//规则属性节点
                skuList: {},//sku对象，后台格式化好
                selectedResult: {},//选中的最终规则-展现用
                selectedTypeDesc: "请选择",//选中后展示信息
                selectedType: {},//选中的规则
            };
        },
        methods: {
            /**
             * 点击按钮节点触发事件
             */
            handleActive: function (key, node) {
                node.active = !node.active;
                if (node.active) {
                    this.selectedType[key] = node.name;
                    //更新同组其他按钮状态
                    this.specTypes[key].forEach(x => {
                        if (x.name != node.name) {
                            x.active = false;
                        }
                    });
                } else {
                    this.selectedType[key] = '';
                }

                this.refreshSpecTypeNodes()
                // console.log('this.selectedType', this.selectedType)
                // console.log('this.specTypes', this.specTypes)
                let selectedSku = this.getSelectedSku();
                this.selectedTypeDesc = selectedSku.desc;
                this.selectedResult = selectedSku.sku;
            },

            /**
             * 获取当前选择的规则信息
             */
            getSelectedSku: function () {
                let m = "请选择", selected = [], sku = {}, keys = [], values = [];
                keys = Object.keys(this.selectedType);
                keys.forEach(x => {
                    if (!Object.is(this.selectedType[x], null) && !Object.is(this.selectedType[x], '')) {
                        selected.push(x + ":" + this.selectedType[x]);
                    }
                })
                values = Object.values(this.selectedType);
                if (values.length === keys.length) {
                    let key = values.join('-');
                    if (this.skuList.hasOwnProperty(key)) {
                        sku = this.skuList[key];
                    }
                }
                if (selected.length > 0) {
                    m = "已选择:";
                    m += selected.join(";");
                }
                return {
                    desc: m,
                    sku: sku
                };
            },

            /***
             * 刷新规则属性状态
             */
            refreshSpecTypeNodes() {
                let types = this.specTypes,
                    currentSelected = this.selectedType;
                Object.keys(types).forEach(x => {
                    let nodes = types[x];
                    for (let i = 0; i < nodes.length; i++) {
                        let node = nodes[i], tempSelected = {};
                        tempSelected[x] = node.name;
                        let selected = Object.values(Object.assign({}, currentSelected, tempSelected));
                        let s = this.getRemainByKey(selected.filter(x => x));
                        if (s > 0) {
                            node.disabled = false;
                        } else {
                            node.disabled = true;
                            node.active = false;
                        }
                    }
                })
            },

            /**
             * 初始化
             */
            init: function () {
                let result = this.recombineSpecTypes(types);
                this.specTypes = result;
                this.skuList = skuList;
                this.selectedType = this.initSelectedType(result);
                this.selectedTypeDesc = this.getSelectedSku().desc;
                this.refreshSpecTypeNodes()
                console.log('this.specTypes', this.specTypes)
            },

            /**
             * 初始化已选规则
             */
            initSelectedType: function (types) {
                let selectedType = {};
                let keys = Object.keys(types);
                keys.forEach(x => {
                    selectedType[x] = '';
                })
                return selectedType;
            },

            /**
             * 重构规则结构
             *
             */
            recombineSpecTypes: function (types) {
                let result = {};
                let specValues = [];
                for (let i = 0; i < types.length; i++) {
                    let item = types[i];
                    specValues.push(item.typeValues);
                    let values = [];
                    for (let j = 0; j < item.typeValues.length; j++) {
                        let value = item.typeValues[j];
                        values.push({
                            'active': false,
                            'name': value,
                            'disabled': false
                        });
                    }
                    result[item.typeTitle] = values
                }
                this.specValues = specValues;
                return result;
            },

            /**
             * 获取所选值对应的库存
             * @param selected 数组['大','黄']
             * @returns {number|*}
             */
            getRemainByKey: function (selected) {
                const key = selected.join('-')
                if (typeof tempData[key] !== 'undefined') {
                    return tempData[key]
                }

                if (selected.length === this.specValues.length) {
                    return this.skuList[key] ? tempData[key] = this.skuList[key].remain : tempData[key] = 0
                }

                let remain = 0
                let tempSelected = []

                for (let i = 0; i < this.specValues.length; i++) {
                    const exist = this.specValues[i].find(_item => _item === selected[0])
                    if (exist && selected.length > 0) {
                        tempSelected.push(selected.shift())
                    } else {
                        this.specValues[i].forEach(_item => {
                            remain += this.getRemainByKey(tempSelected.concat(_item, selected))
                        })
                        break
                    }
                }
                return tempData[key] = remain
            },

        },

        created() {
            this.init();
        }
    })
</script>
</html>
